<template>
	<view class="content">
		<view class="navtab-box">
			<view :class="navIndex == 0?'nav-box' : ''" @click="navClick(0)">
				<view class="nav-tit">新邀请</view>
				<view class="bottom-line"></view>
			</view>
			<view :class="navIndex == 1?'nav-box' : ''" @click="navClick(1)">
				<view class="nav-tit">已面试</view>
				<view class="bottom-line"></view>
			</view>
			<view :class="navIndex == 2?'nav-box' : ''" @click="navClick(2)">
				<view class="nav-tit">未接受</view>
				<view class="bottom-line"></view>
			</view>
			<view :class="navIndex == 3?'nav-box' : ''" @click="navClick(3)">
				<view class="nav-tit">已接受</view>
				<view class="bottom-line"></view>
			</view>
		</view>
		
		<view class="swiper-box" v-if="navIndex==0">
			<view class="swiper-item">
				<view class="item-box" v-for="item,i in list" :key="i">
					<view class="item-box-header">
						<view class="item-box-header-left">
							<view class="job-name">{{ item.company_job_name }}</view>
							<view class="comp-name">{{ item.company_name }}</view>
						</view>
						<view class="item-box-header-right">></view>
					</view>
					<view class="item-box-line"></view>
					<view class="item-box-center">
						<view class="invite-cont">{{ item.invite_content }}</view>
						<view class="link-mobile">
							<image src="../../static/link-mobile.png"></image>
							<view class="link-mobile-tit">{{ item.link_mobile }}</view>
						</view>
						<view class="invite-date">
							<image src="../../static/invite-date.png"></image>
							<view class="invite-date-tit">{{ item.interview_date}}</view>
						</view>
						<view class="invite-area">
							<image src="../../static/invite-area.png"></image>
							<view class="invite-area-tit">{{ item.interview_area }}</view>
						</view>
					</view>
					<view class="item-box-line"></view>
					<view class="item-box-foot">
						<view class="foot-left" @click="jieShou(item.id)">接受</view>
						<view class="foot-line"></view>
						<view class="foot-right" @click="juJue(item.id)">拒绝</view>
					</view>
				</view>
			</view>
		</view>
		<view class="swiper-box" v-if="navIndex==1">
			<view class="swiper-item">
				<view class="item-box" v-for="item,i in list" :key="i">
					<view class="item-box-header">
						<view class="item-box-header-left">
							<view class="job-name">{{ item.company_job_name }}</view>
							<view class="comp-name">{{ item.company_name }}</view>
						</view>
						<view class="item-box-header-right">></view>
					</view>
					<view class="item-box-line"></view>
					<view class="item-box-center">
						<view class="invite-cont">{{ item.invite_content }}</view>
						<view class="link-mobile">
							<image src="../../static/link-mobile.png" mode=""></image>
							<view class="link-mobile-tit">{{ item.link_mobile }}</view>
						</view>
						<view class="invite-date">
							<image src="../../static/invite-date.png" mode=""></image>
							<view class="invite-date-tit">{{ item.interview_date}}</view>
						</view>
						<view class="invite-area">
							<image src="../../static/invite-area.png" mode=""></image>
							<view class="invite-area-tit">{{ item.interview_area }}</view>
						</view>
					</view>
					<view class="item-box-line"></view>
					<view class="item-box-foot">
						<view class="foot-left">已面试</view>
						<!-- <view class="foot-line"></view>
						<view class="foot-right">拒绝</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="swiper-box" v-if="navIndex==2">
			<view class="swiper-item">
				<view class="item-box" v-for="item,i in list" :key="i">
					<view class="item-box-header">
						<view class="item-box-header-left">
							<view class="job-name">{{ item.company_job_name }}</view>
							<view class="comp-name">{{ item.company_name }}</view>
						</view>
						<view class="item-box-header-right">></view>
					</view>
					<view class="item-box-line"></view>
					<view class="item-box-center">
						<view class="invite-cont">{{ item.invite_content }}</view>
						<view class="link-mobile">
							<image src="../../static/link-mobile.png" mode=""></image>
							<view class="link-mobile-tit">{{ item.link_mobile }}</view>
						</view>
						<view class="invite-date">
							<image src="../../static/invite-date.png" mode=""></image>
							<view class="invite-date-tit">{{ item.interview_date}}</view>
						</view>
						<view class="invite-area">
							<image src="../../static/invite-area.png" mode=""></image>
							<view class="invite-area-tit">{{ item.interview_area }}</view>
						</view>
					</view>
					<view class="item-box-line"></view>
					<view class="item-box-foot">
						<view class="foot-left">未接受</view>
						<!-- <view class="foot-line"></view>
						<view class="foot-right">已拒绝</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="swiper-box" v-if="navIndex==3">
			<view class="swiper-item">
				<view class="item-box" v-for="item,i in list" :key="i">
					<view class="item-box-header">
						<view class="item-box-header-left">
							<view class="job-name">{{ item.company_job_name }}</view>
							<view class="comp-name">{{ item.company_name }}</view>
						</view>
						<view class="item-box-header-right">></view>
					</view>
					<view class="item-box-line"></view>
					<view class="item-box-center">
						<view class="invite-cont">{{ item.invite_content }}</view>
						<view class="link-mobile">
							<image src="../../static/link-mobile.png" mode=""></image>
							<view class="link-mobile-tit">{{ item.link_mobile }}</view>
						</view>
						<view class="invite-date">
							<image src="../../static/invite-date.png" mode=""></image>
							<view class="invite-date-tit">{{ item.interview_date}}</view>
						</view>
						<view class="invite-area">
							<image src="../../static/invite-area.png" mode=""></image>
							<view class="invite-area-tit">{{ item.interview_area }}</view>
						</view>
					</view>
					<view class="item-box-line"></view>
					<view class="item-box-foot">
						<view class="foot-left">已接受</view>
						<!-- <view class="foot-line"></view>
						<view class="foot-right">拒绝</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:{},
				status:0,
				navIndex:0,
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			navClick(i){
				this.navIndex = i
				this.getData();
			},
			async getData() {
				this.status=this.navIndex
				const res = await this.get('/Index/User/get_company_invite',{status:this.status});
				if(res.code == 200){
					this.list=res.data
				}
			},
			async jieShou(id) {
				const res = await this.get('/Index/User/company_invite_accept',{'id':id});
				if(res.code == 200){
					uni.showToast({
						title:'已接受',
						duration:1000,
						icon:'none'
					})
				}
				this.getData()
			},
			async juJue(id) {
				const res = await this.get('/Index/User/company_inivite_reject',{'id':id});
				if(res.code == 200){
					uni.showToast({
						title:'已拒绝',
						duration:1000,
						icon:'none'
					})
				}
				this.getData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.navtab-box{
			display: flex;
			justify-content: space-around;
			font-size: 30upx;
			margin-top: 28upx;
			.nav-box{
				color: #3291F8;
				.bottom-line{
					margin: 26upx 0 56upx 0;
					border-bottom: 4upx solid #3291F8;
				}
			}
		}
	}
	.item-box-line{
		width: 628upx;
		margin: 0 0 36upx 12upx;
		border: 2upx solid #E1E3E6;
	}
	.content{
		.swiper-box{
			.swiper-item{
				.item-box{
					width: 668upx;
					// height: 592upx;
					border: 2upx solid #E1E3E6;
					margin: 0 0 56upx 42upx;
					.item-box-header{
						display: flex;
						align-items: center;
						.item-box-header-left{
							margin-left: 40upx;
							.job-name{
								font-size: 28upx;
								color: #101010;
								margin: 56upx 0 10upx 0;
							}
							.comp-name{
								font-size: 28upx;
								color: #C2C7CC;
								margin-bottom: 36upx;
							}
						}
						.item-box-header-right{
							margin-left: auto;
							margin-right: 28upx;
						}
					}
					.item-box-center{
						font-size: 28upx;
						color: #101010;
						margin-left: 40upx;
						.invite-cont{
							margin-bottom: 16upx;
						}
						.link-mobile{
							display: flex;
							align-items: center;
							margin-bottom: 10upx;
							image{
								width: 28upx;
								height: 28upx;
								margin-right: 14upx;
							}
						}
						.invite-date{
							display: flex;
							align-items: center;
							margin-bottom: 10upx;
							image{
								width: 28upx;
								height: 28upx;
								margin-right: 14upx;
							}
						}
						.invite-area{
							display: flex;
							align-items: center;
							margin-bottom: 36upx;
							image{
								width: 28upx;
								height: 28upx;
								margin-right: 14upx;
							}
							.invite-area-tit{
							}
						}
					}
					.item-box-foot{
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 40upx 0 30upx 0;
						.foot-left{
							color: #3291F8;
						}
						.foot-line{
							margin: 0 150upx;
							height: 68upx;
							border-right: 2upx solid #ACC0D8;
						}
						.foot-right{
							color: #3291F8;
						}
					}
				}
			}
		}
	}
</style>
